<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入名称" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="icon">
              <a-input v-model="model.icon" placeholder="请输入图标" ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="绑定表单key" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="formKey">
              <!-- <a-input v-model="model.formKey" placeholder="请输入绑定表单key" ></a-input> -->
              <a-select
                show-search
                v-model="model.formKey"
                placeholder="请选择表单"
                :default-active-first-option="false"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="null"
              >
                <a-select-option v-for="d in formKeyList" :key="d.key">
                  {{ d.value }} KEY: {{ d.key }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="绑定流程key" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processKey">
              <!-- <a-input v-model="model.processKey" placeholder="请输入绑定流程key" ></a-input> -->
              <a-select
                show-search
                v-model="model.processKey"
                placeholder="请选择流程"
                :default-active-first-option="false"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="null"
              >
                <a-select-option v-for="d in actList" :key="d.key">
                  {{ d.name }}  KEY: {{ d.key }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="启用状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <!-- <a-input v-model="model.status" placeholder="请输入启用状态" ></a-input> -->
              <a-switch v-model="status" @change="onChange" />
            </a-form-model-item>
          </a-col>
        <!--  <a-col :span="24">
            <a-form-model-item label="选择使用范围" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rangeuse">
              <a-input v-model="model.rangeuse" placeholder="请输入选择使用范围"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="删除状态(0-正常,1-已删除)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="delFlag">
              <a-input-number v-model="model.delFlag" placeholder="请输入删除状态(0-正常,1-已删除)" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ApplyFormForm',
    components: {
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          processKey: [{ required: true, message: '绑定流程不能为空', trigger: 'blur' }],
          formKey: [{ required: true, message: '绑定表单不能为空', trigger: 'blur' }]
        },
        url: {
          add: '/applyform/add',
          edit: '/applyform/edit',
          queryById: '/applyform/queryById',
          actList: 'act/reprocdef/list/active',
          formKeyList: '/applyform/formKeys'
        },
        status: true,
        actList: [],
        formKeyList: []

      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
      this.getActList()
      this.getFormKey()
    },
    methods: {
      // 获取激活流程
       getActList() {
         getAction(this.url.actList).then((res) => {
            console.log('获取激活流程', res)
            this.actList = res.result
         })
       },
      // 获取表单
       getFormKey() {
         getAction(this.url.formKeyList).then((res) => {
           console.log('获取表单', res)
           this.formKeyList = res.result
         })
       },
      onChange(checked) {
        console.log(`a-switch to ${checked}`)
        if (checked) {
           this.model.status = '1'
        } else {
          this.model.status = '2'
        }
      },
      add () {
        this.edit(this.modelDefault)
      },
      edit (record) {
        if (record.status === '1') {
           this.status = true
        } else {
           this.status = false
        }
        this.model = Object.assign({}, record)
        this.visible = true
      },
      submitForm () {
        const that = this
        // 触发表单验证
         if (this.status) {
            this.model.status = '1'
         } else {
           this.model.status = '2'
         }
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
               method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      }
    }
  }
</script>
